<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>御码课程</title>
  <link rel="icon"type="image/x-icon"  sizes="32x32" href="./logo.ico" />
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/course.css">
  <style>
    .header {
      box-shadow: 0 5px 5px #e6e4e4;
    }

    footer {
        height: 300px;
        background-color: #faf9f9;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="w clearfix">
      <div class="left_logo">
        <a href="http://www.yumacode.com/">
          <img src="./img/logo1.png" alt="" />
        </a>
      </div>
      <div class="right_navlis">
        <ul>
          <li><a href="./index.html">首页</a></li>
          <li><a href="./course.html" class="active">课程</a></li>
          <li><a href="./teacher.html">名师团队</a></li>
          <li><a href="./student.html">学员风采</a></li>
          <li><a href="./learn.html">联系我们</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
   
    <!-- 学习路线 -->
    <div class="line" style="margin-top: 80px;">
      <div class="w">
        <div class="title">
          <h2>课程学习路线打造<span>实力派前端工程师</span></h2>
        </div>
        <div class="content">
          <img src="./img/boxlist2pic5s.png" alt="">

          <div class="line_msg">
            <p>让你掌握页面的制作 <br>技能，PC端、移动端<br>统统不是事儿</p>
            <p>让你的网页“动”起来 <br>输入、点击、倒计时<br>用户交互全搞定</p>
            <p>深入掌握前端ES6技术 <br>实现前端和服务端数据沟通</p>
            <p>让你的开发“飞”起来 <br>各种解决方案入职工作直接用</p>
            <p>就业保障硬实力<br>为你的就业保驾护航</p>
            <p>让你的代码灵活适配<br>H5、APP、小程序全适配</p>
          </div>

          <div class="line_title">
            <span>市场价值</span>
            <span>学习路径</span>
          </div>

          <div class="line_price">
            <span>10000+</span>
            <span>8000</span>
            <span>5000</span>
            <span>4000</span>
            <span>3000</span>
          </div>

          <div class="line_step">
            <span>网页布局+移动Web</span>
            <span>JavaScript</span>
            <span>ES6+node.js+工程化</span>
            <span>Vue2+Vue3</span>
            <span>React技术</span>
            <span>微信小程序技术栈</span>
          </div>
        </div>

      </div>
    </div>

    <!-- 项目展示 -->
    <div class="products">
      <div class="title">
        <h1>御码企业级项目课程</h1>
      </div>
      <div class="inner">
        <div class="w">

          <ol>
            <li class="active">御码商城(PC端)</li>
            <li>小米商城(移动端)</li>
            <li>学生管理系统(JS)</li>
            <li>数据可视化(DOM)</li>
            <!-- <li>御码广告管理系统</li> -->
            <li>御码商城后台管理系统</li>
            <li>御医坊管理系统</li>
            <!-- <li>御码工作日志管理系统</li> -->
          </ol>

          <ul>
            <li style="display: block;">
              <div class="leftItem">
                <h3>御码商城(PC端)</h3>
                <p>
                  御码商城基于HTML+CSS3开发的轻量级电子商务前端页面,采用纯原生技术实现响应式布局,完美适配手机,平板和PC端.通过FlexBox+Grid实现灵活排版,运用CSS动画增强用户体验,针对不同屏幕次数优化使用媒体查询实现响应式效果
                </p>

                <div class="circle">
                  <span>
                    <b>6个</b>
                    解决方案
                  </span>
                  <span>
                    <b>40+个</b>
                    业务功能
                  </span>
                  <span>
                    <b>100+个</b>
                    接口数量
                  </span>
                  <span>
                    <b>个</b>
                    页面数量
                  </span>
                </div>

                <h4>解决方案</h4>
                <div class="details">
                  <p><b>1:</b><span>极致轻量化:</span>完全脱离框架依赖,通过原生JS+CSS变量动态实现主题切换</p>
                  <p><b>2:</b><span>高级CSS技巧:</span>通过clip-path实现商品卡片异形切割</p>
                  <p><b>3:</b><span>智能适配体系:</span>基于Vw/Vh单位配合css数学calc()构建精准响应式布局</p>
                  <p><b>4:</b><span>性能黑科技:</span>采用CSS content-visibility属性实现智能渲染优化</p>
                  <p><b>5:</b><span>渐进式增强设计:</span>通过@supports特性检测实现优雅降级,保证老旧浏览器正常预览</p>
                </div>
              </div>
              <div class="rightItem">
                <div class="play">
                  <!-- <a href="./img/御码商城首页.gif">播放</a> -->
                  <!-- <img src="./img/御码商城首页.gif" alt=""> -->
                  <video  controls >
                      <source src="./img/yuma.mp4">
                  </video>
                </div>

              </div>
            </li>
            <li style="display: none;">
              <div class="leftItem">
                <h3>小米商城(移动端)</h3>
                <p>
                  本项目基于HTML+CSS3技术栈,采用REM适配方案,精准还原小米商城移动端页面.通过Flex布局配合Viewport+Rem实现多端完美适配,确保从375px到414px等主流手机屏幕的一致性.运用CSS3过渡动画还原小米特色的动态交互效果
                </p>

                <div class="circle">
                  <span>
                    <b>6个</b>
                    解决方案
                  </span>
                  <span>
                    <b>18个</b>
                    业务功能
                  </span>
                  <span>
                    <b>5个</b>
                    接口数量
                  </span>
                  <span>
                    <b>1个</b>
                    页面数量
                  </span>
                </div>

                <h4>解决方案</h4>
                <div class="details">
                  <p><b>1:</b><span>纯静态高性能:</span>完全脱离框架依赖,通过原生JS+CSS变量动态实现主题切换</p>
                  <p><b>2:</b><span>Rem适配体系:</span>通过Root fontSize配合Rem单位,精准适配各种移动端</p>
                  <p><b>3:</b><span>CSS3动画:</span>使用过渡和animation实现动画效果</p>
                  <p><b>4:</b><span>极致优化方案:</span>采用雪碧图和图片压缩,样式精简等优化手段</p>
                  <p><b>5:</b><span>设计方案复刻:</span>严格遵守小米官方UI规范,1:1还原</p>
                  <p><b>6:</b><span>兼容性保障:</span>在各种设备中保持显示效果完全一致</p>
                </div>
              </div>
              <div class="rightItem">
                <div class="play">
                  <video controls>
                    <source src="./img/mi.mp4">
                  </video>
                </div>

              </div>
            </li>
            <li style="display: none;">
              <div class="leftItem">
                <h3>学生管理系统</h3>
                <p>
                  本项目基于HTML+CSS3+JavaScript与Echarts开发的学生管理系统,提供直观的数据可视化看板,包含学生信息管理,成绩统计分析等功能,通过Echarts图表动态展示班级成绩分布,学科趋势等数据.前端采用响应式适配多终端.结合本地存储实现离线数据缓存,操作便捷.
                </p>

                <div class="circle">
                  <span>
                    <b>5个</b>
                    解决方案
                  </span>
                  <span>
                    <b>6个</b>
                    业务功能
                  </span>
                  <span>
                    <b>1个</b>
                    接口数量
                  </span>
                  <span>
                    <b>1个</b>
                    页面数量
                  </span>
                </div>

                <h4>解决方案</h4>
                <div class="details">
                  <p><b>1:</b><span>教育数据可视化:</span>通过Echarts动态生成成绩趋势图,学科对比雷达图,直观展示学生学习情况</p>
                  <p><b>2:</b><span>轻量级架构:</span>纯前端实现,无后端依赖.使用LocalStorage实现数据持久化存储</p>
                  <p><b>3:</b><span>智能表单系统:</span>基于原生JS开发表单验证</p>
                  <p><b>4:</b><span>多维度分析:</span>提供班级/个人纬度的成绩分析,支持数据赛选和图表联动交互</p>
                  <p><b>5:</b><span>响应式界面:</span>适配电脑/平板设备,采用卡片式布局,提升操作体验</p>

                </div>
              </div>
              <div class="rightItem">
                <div class="play">

                  <video controls>
                    <source src="./img/stu.mp4">
                  </video>
                </div>

              </div>
            </li>
            <li style="display: none;">
              <div class="leftItem">
                <h3>御码大屏</h3>
                <p>
                  本项目基于HTML+CSS3+JavaScript与Echarts开发的学生管理系统,提供直观的数据可视化看板.结合Ajax实现异步数据加载.适用于企业报表.实时监控等多种业务场景
                </p>

                <div class="circle">
                  <span>
                    <b>4个</b>
                    解决方案
                  </span>
                  <span>
                    <b>9个</b>
                    业务功能
                  </span>
                  <span>
                    <b>1个</b>
                    接口数量
                  </span>
                  <span>
                    <b>1个</b>
                    页面数量
                  </span>
                </div>

                <h4>解决方案</h4>
                <div class="details">
                  <p><b>1:</b><span>Echarts深度结合:</span>通过Echarts动态生成图表效果,实现30+专业数据可视化操作</p>
                  <p><b>2:</b><span>智能响应式:</span>基于CSS3 Grid+Flex双布局系统,自动适配大屏的显示需求</p>
                  <p><b>3:</b><span>动态交互:</span>支持图表联动,数据赛选丰富交互功能</p>
                  <p><b>4:</b><span>模块化架构:</span>采用组件化开发模式,图表配置可以复用80%</p>
                </div>
              </div>
              <div class="rightItem">
                <div class="play">

                  <video controls>
                    <source src="./img/大屏.mp4">
                  </video>
                </div>

              </div>
            <!-- </li>
            <li style="display: none;">
               <div class="leftItem">
                <h3>御码广告管理系统(Vue)</h3>
                <p>
                    该项目是工程化阶段的相关重要技术的综合性实战应用，主要提高学员此阶段所学技术的综合运用和JS编码能力,包含2个子应用:后台接口数据处理应用与前台数据展现交互应用
                </p>

                <div class="circle">
                  <span>
                    <b>7个</b>
                    解决方案
                  </span>
                  <span>
                    <b>9个</b>
                    业务功能
                  </span>
                  <span>
                    <b>1个</b>
                    接口数量
                  </span>
                  <span>
                    <b>1个</b>
                    页面数量
                  </span>
                </div>

                <h4>解决方案</h4>
                <div class="details">
                  <p><b>1:</b><span>WebPack深度集成:</span>支持EJS模板动态编译,代码分块,生成环境优化</p>
                  <p><b>2:</b><span>组件化开发:</span>管理员列表表格抽离为独立EJS组件,提升复用性</p>
                  <p><b>3:</b><span>无刷新切换:</span>基于History API 实现路由跳转,避免页面重载</p>
                  <p><b>4:</b><span>Axios增强:</span>封装全局实例,统一处理Token,错误拦截,Loading状态</p>
                  <p><b>5:</b><span>Token认证:</span>登录状态持久化,接口权限拦截</p>
                  <p><b>6:</b><span>表单防御:</span>必填项验证,邮箱格式校验,防止无效刷新提交数据</p>
                  <p><b>7:</b><span>路由设计:</span>通过路由设计表方法二,实现配置优化路由,易于扩展</p>
                </div>
              </div>
              <div class="rightItem">
                <div class="play">

                  <video controls>
                    <source src="./img/大屏.mp4">
                  </video>
                </div>

              </div>
            </li> -->
            <li style="display: none;">
               <div class="leftItem">
                <h3>御码商城后台管理系统(React)</h3>
                <p>
                    御用运营管理系统是以React技术栈为主线，并深入探讨React和TypeScript的综合性实战应用,通过该项目可以高效、系统地掌握 React 知识原理以及技术应用，从而获取 React 的实战开发技术（含与TS、`Antd` 的结合使用等）技术栈:React + Hooks + Redux Toolkit + Ant Design + TypeScript +` Axios` + React Router + Less + `Craco` + `Apipost` + Node+Babel+`ESLint`+`Echarts`
                </p>

                <div class="circle">
                  <span>
                    <b>5个</b>
                    解决方案
                  </span>
                  <span>
                    <b>10个</b>
                    业务功能
                  </span>
                  <span>
                    <b>5个</b>
                    接口数量
                  </span>
                  <span>
                    <b>7个</b>
                    页面数量
                  </span>
                </div>

                <h4>解决方案</h4>
                <div class="details">
                  <p><b>1:</b><span>深度整合技术栈:</span>Hooks驱动组件逻辑+ReduxToolkit集中式状态管理 + Axios拦截封装</p>
                  <p><b>2:</b><span>安全体系:</span>Token持久化存储,自定义路由守卫拦截非法访问,防重复提交</p>
                  <p><b>3:</b><span>核心框架:</span>React18 + TypeScript 5.x</p>
                  <p><b>4:</b><span>工程化:</span>Craco(webPack配置覆盖)</p>
                  <p><b>5:</b><span>高复用设计:</span>自定义Hooks(全局Message/请求loading),抽离表单控件,表格组件</p>
                </div>
              </div>
              <div class="rightItem">
                <div class="play">
                  <video controls>
                    <source src="./img/电商.mp4">
                  </video>
                </div>

              </div>
            </li>
            <li style="display: none;">
               <div class="leftItem">
                <h3>御医坊管理系统(Vue)</h3>
                <p>
                    本项目是为医疗管理量身定制的后台管理系统，主要用于医院信息、医师排班、广告公告、角色权限等内容的管理采用Vue3技术栈和TypeScript语法，实现灵活的权限控制、路由配置、数据传递等功能。
                </p>

                <div class="circle">
                  <span>
                    <b>5个</b>
                    解决方案
                  </span>
                  <span>
                    <b>15个</b>
                    业务功能
                  </span>
                  <span>
                    <b>10个</b>
                    接口数量
                  </span>
                  <span>
                    <b>8个</b>
                    页面数量
                  </span>
                </div>

                <h4>解决方案</h4>
                <div class="details">
                  <p><b>1:</b><span>智能排版引擎:</span>科室-医生双层排版数据联动,支持可视化日历操作</p>
                  <p><b>2:</b><span>现代化工具链集成:</span>Vite秒级热更新构建,TypeScript强类型校验</p>
                  <p><b>3:</b><span>企业级工程实践:</span>环境变量分级管理(dev/test/prod)Nginx生产部署配置,负载均衡</p>
                  <p><b>4:</b><span>交互增强设计:</span>自适应折叠侧边栏,全局NProgress加载进度反馈</p>
                  <p><b>5:</b><span>数据可视化呈现:</span>Echarts集成医疗数据看板,动态面包屑导航与路由状态持久化</p>
                </div>
              </div>
              <div class="rightItem">
                <div class="play">

                  <video controls>
                    <source src="./img/御医坊.mp4">
                  </video>
                </div>

              </div>
            </li>
            <!-- <li style="display: none;">
              <div class="leftItem">
                <h3>日志管理系统(小程序)</h3>
                <p>
                    基于UniApp开发的日志管理系统小程序，实现日志的便捷记录与高效管理。支持多格式内容录入、分类标签、快速检索与数据可视化。具备云端同步、多端数据一致及权限管控功能，保障信息安全。界面简洁、操作流畅，助力团队或个人轻松追踪活动、分析趋势、优化工作流。
                </p>

                <div class="circle">
                  <span>
                    <b>5个</b>
                    解决方案
                  </span>
                  <span>
                    <b>15个</b>
                    业务功能
                  </span>
                  <span>
                    <b>10个</b>
                    接口数量
                  </span>
                  <span>
                    <b>8个</b>
                    页面数量
                  </span>
                </div>

                <h4>解决方案</h4>
                <div class="details">
                  <p><b>1:</b><span>UniApp:</span>基于 Vue.js 语法，使用单一代码库同时发布到微信、支付宝等多个小程序平台</p>
                  <p><b>2:</b><span>Vue.js开发:</span>采用数据驱动的MVVM模式。日志数据的增、删、改、查等操作会自动同步更新</p>
                  <p><b>3:</b><span>小程序原生组件与 AP:</span>通过 UniApp 调用小程序平台（如微信）的原生能力</p>
                  <p><b>4:</b><span>Vuex 状态管理:</span>集中管理所有组件共享的状态，如当前用户信息、日志列表数据、筛选条件等</p>
                  <p><b>5:</b><span>条件编译与多端兼容:</span>利用 UniApp 的条件编译语法（如 #ifdef MP-WEIXIN）</p>
                </div>
              </div>
              <div class="rightItem">
                <div class="play">

                  <video controls>
                    <source src="./img/大屏.mp4">
                  </video>
                </div>

              </div>
            </li> -->
          </ul>
        </div>
      </div>
    </div>

     <!-- 课程介绍 -->
    <div class="course_item">
      <div class="w">
        <div class="title_">
          <h3>从入门到就业 构建<span>前端晋级之路</span></h3>
          <h5>完成高含金量的项目是检验学习效果的唯一标准</h5>
        </div>
        <div class="course_list">
          <div class="item">
            <div class="title">基础入门</div>
            <div class="item_content">

              <p>
                <strong>HTML技术</strong>
                掌握 HTML5 搭建页面结构
              </p>
              <p>
                <strong>CSS3 网页布局</strong>
                掌握PC页面布局与特效
              </p>
              <p>
                <strong>移动端开发</strong>
                掌握移动端页面适配与布局
              </p>
              <div class="one_course">
                <strong>阶段案例实战</strong>
                <ul>
                  <li><span>1</span>御码商城(PC端)</li>
                  <li><span>2</span>个人博客(PC端)</li>
                  <li><span>3</span>御金所(响应式)</li>
                  <li><span>4</span>小米商城(移动端)</li>
                  <li><span>5</span>携程旅游(移动端)</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title" style="background-color: #01c4e7;">进阶技术</div>
            <div class="item_content">

              <p>
                <strong>JavaScript 开发</strong>
                1.掌握 JavaScript 语言基础语法<br>
                2.掌握 JavaScript 基本编程思想</br>
                3.JavaScript 高阶场景应用
              </p>
              <p>
                <strong>网页交互技术</strong>
                1.DOM 操作与事件处理<br>
                2.浏览器核心 API 应用</br>
                3.使用正则处理文本内容
              </p>
              <p style="border: 2px dotted orangered;">
                <strong>AI编程</strong>
                1.TraeAI编程工具使用<br>
                2.CourseAI</br>
                3.基于Trea开发工具进行AI编程
              </p>

              <div class="one_course">
                <strong>PC 端综合实战项目</strong>
                <ul>
                  <li><span>1</span>大屏数据可视化</li>
                  <li><span>2</span>学生管理系统</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="item">
            <div class="title" style="background-color: #1bc8b5;">ES6+Node.js+工程化</div>
            <div class="item_content">

              <p>
                <strong>ES6技术</strong>
                1.掌握 模块化开发<br>
                2.掌握 异步编程</br>
                3.Promise</br>
                4.async与await原理<br>
                5.微任务和宏任务<br>
                6.ES6新增API<br>
                7.axios
              </p>
              <p>
                <strong>Node.js技术开发</strong>
                1.Node全局对象应用<br>
                2.Node文件查找优先级及文件查找策略</br>
                3.实现 EventEmitter <br>
                4.掌握 Express/Koa开发框架<br>
                5.npm/yarn依赖包管理原理<br>
                6.TCP/IP网络协议<br>
                7.DNS作用及解析过程<br>
                8.协商缓存/强缓存<br>
                9.静态资源部署<br>
                10.cookie/session/Storage<br>
                11.手动搭建nginx服务
              </p>
              <p>
                <strong>webPack技术深耕</strong>
                1.webPack打包及打包速度优化方案 <br>
                2.webPack proxy工作原理及跨域<br>
                3.webPack 编译原理.chunk/bundle/module的区别及应用 <br>
                4.webPack 实现 Vue 及 React的脚手架核心功能 <br>
                5.手动编写Babel插件 <br>
                6.xss攻击原理 / 防御 <br>
                7.CSRF攻击原理 / 防御<br>
                8.HTTP劫持/页面劫持及防御 <br>
              </p>
              <div class="one_course">
                <strong>工程化项目</strong>
                <ul>
                  <li><span>1</span>御码全栈广告管理系统</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="item">
            <div class="title" style="background-color: #4ca4fe;">Vue技术栈</div>
            <div class="item_content">

              <p>
                <strong>TS(typeScript)</strong>
                1.TypeScript基础数据类型及高级数据类型<br>
                2.TypeScript接口/类/枚举/泛型</br>
                3.基于TypeScript的axios二次封装</br>
              </p>
              <p>
                <strong>Vue2+Vu3技术栈</strong>
                1.Vue生命周期<br>
                2.Vue数据双向绑定及响应式功能的原理</br>
                3.SPA首屏加载过慢解决方案 <br>
                4.常见修饰符应用场景<br>
                5.封装自定义Hooks<br>
                6.内置组件teleport等使用<br>
                7.虚拟DOM及diff算法<br>
                8.服务器部署404问题解决<br>
                9.Vue测试工具<br>
                10.组件/图片懒加载<br>
                11.Vuex/Pinia的工作流程及项目中的使用<br>
                12.Vue-router的模式/守卫/配置/传参<br>
                13.filter/directive/mixin的用法<br>
                14.Vue项目中使用Ts
              </p>

              <div class="one_course">
                <strong>Vue2+Vue3项目</strong>
                <ul>
                  <li><span>1</span>御码运营管理系统</li>
                  <li><span>2</span>御码商城后台管理系统</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title" style="background-color: #ff9243;">React技术栈</div>
            <div class="item_content">

              <p>
                <strong>React</strong>
                1.Next.js服务端渲染,静态站点生成<br>
                2.Taro框架的使用</br>
                3.React Hooks的原理</br>
                4.Fiber框架<br>
                5.React Router多种路由模式<br>
              </p>
              <p>
                <strong>React高级</strong>
                1.React组件通信<br>
                2.React生命周期及对应的钩子函数</br>
                3.React合成事件 <br>
                4.Ant Design和Umi的使用<br>
                5.Saga在React中的异步操作管理<br>
                6.长列表及防抖实现方法<br>
              </p>

              <div class="one_course">
                <strong>工程化项目</strong>
                <ul>
                  <li><span>1</span>御医坊运营管理系统</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title" style="background-color: #7cd4d8;">微信小程序</div>
            <div class="item_content">

              <p>
                <strong>RN原生</strong>
                1.RN开发模式环境配置<br>
                2.UL框架使用:native-base</br>
                3.RN路由应用</br>
                4.RN与React-Redux结合使用,异步请求,数据持久化<br>
                5.RN原生设备功能调用:GPS,二维码扫描<br>
                6.RN项目发布<br>
              </p>
              <p>
                <strong>小程序开发流程</strong>
                1.基于REM移动端适配<br>
                2.Vue路由配置</br>
                3.Vuex多模块与命名空间的应用 <br>
              </p>
              <div class="one_course">
                <strong>微信小程序</strong>
                <ul>
                  <li><span>1</span>御码工作日志管理</li>
                  <li><span>2</span>御码在线电影商城</li>
                  <li><span>3</span>御码在线音乐播放器</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <footer style="background-color: #7b51bf;">
      <div class="w">
          <div class="logo">
               <img src="./img/logo1.png" alt="">
          </div>

          <div class="rightMsg">
               <ul class="clearfix">
                  <li><a style="color: #fff;" href="./index.html">首页</a></li>
                  <li><a style="color: #fff;" href="./course.html">课程学习</a></li>
                  <li><a style="color: #fff;" href="./teacher.html">名师团队</a></li>
                  <li><a style="color: #fff;" href="./learn.html">联系我们</a></li>
               </ul>

               <div class="address" style="color: #fff;">
                   <span style="color: #fff;">地址:</span>
                   辽宁省,大连市,高新园区嘉创大厦1602
               </div>

               <div class="add">
                  <p>
                     <span style="color: #fff;">抖音添加: action_li</span>
                  </p>

                  <p>
                     <span style="color: #fff;">微信扫码添加:   <img src="./img/wx.jpg" width="80px" style="margin-left: 10px; border-radius: 5px;" alt=""></span>
                  </p>
               </div>
          </div>
            
      </div>
  </footer>
</body>
<script>
      let lis = document.querySelectorAll('.inner ol li');
      let ul_lis = document.querySelectorAll('.inner ul li');
      lis.forEach(function(item,index){
          item.addEventListener('click', function(){
              document.querySelector('.inner ol .active').classList.remove('active');
              this.className = 'active';
              ul_lis.forEach(function(element) {
                   element.style.display = 'none';
              })
              ul_lis[index].style.display = 'block';
          })
      })
</script>
</html>